<template>
	<!-- 完全保留你原有的模板 -->
	<view class="page-container">
		<view class="form-container">
			<view class="title">用户登录</view>
			<view class="input-group">
				<input type="text" v-model="username" placeholder="请输入用户名" class="input" :disabled="isLoading"
					@input="clearError('username')" />
				<text class="error-text" v-if="errors.username">{{ errors.username }}</text>
			</view>

			<view class="input-group">
				<input type="password" v-model="password" placeholder="请输入密码" class="input" :disabled="isLoading"
					@input="clearError('password')" />
				<text class="error-text" v-if="errors.password">{{ errors.password }}</text>
			</view>

			<view class="remember-container">
				<checkbox v-model="rememberMe" :disabled="isLoading" />
				<text class="remember-text">记住我</text>
			</view>

			<button class="btn login-btn" @click="handleLogin" :disabled="isLoading">
				<template v-if="isLoading">
					<text class="loading">登录中...</text>
				</template>
				<template v-else>
					<text>登录</text>
				</template>
			</button>

			<view class="link-container">
				<text>还没有账号？</text>
				<text class="link" @click="goToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				rememberMe: false,
				isLoading: false,
				errors: {
					username: '',
					password: ''
				},
				storedUser: uni.getStorageSync('userInfo') || {}
			};
		},
		onLoad() {
			if (this.storedUser.username) {
				this.username = this.storedUser.username;
				this.rememberMe = true;
			}
		},
		methods: {
			goToRegister() {
				uni.navigateTo({
					url: '/pages/components/Register/Register',
					fail: (err) => {
						console.error('跳转注册页失败：', err);
						uni.reLaunch({
							url: '/pages/components/Register/Register'
						});
					}
				});
			},

			clearError(field) {
				this.errors[field] = '';
			},

			validateLogin() {
				let isValid = true;
				this.errors = {
					username: '',
					password: ''
				};

				if (!this.username.trim()) {
					this.errors.username = '请输入用户名';
					isValid = false;
				} else {
					const registeredUsers = uni.getStorageSync('registeredUsers') || [];
					const user = registeredUsers.find(u => u.username === this.username.trim());
					if (!user) {
						this.errors.username = '该账号未注册';
						isValid = false;
					}
				}

				if (!this.password.trim()) {
					this.errors.password = '请输入密码';
					isValid = false;
				} else if (this.username.trim()) {
					const registeredUsers = uni.getStorageSync('registeredUsers') || [];
					const user = registeredUsers.find(u => u.username === this.username.trim());
					if (user && user.password !== this.password) {
						this.errors.password = '密码错误';
						isValid = false;
					}
				}

				return isValid;
			},

			async handleLogin() {
				if (!this.validateLogin()) return;
				this.isLoading = true;
				try {
					await this.mockLogin();
					const userInfo = {
						username: this.username.trim(),
						loginTime: new Date().toLocaleString(),
						token: 'user-token-' + Date.now()
					};

					if (this.rememberMe) {
						uni.setStorageSync('userInfo', userInfo);
					} else {
						uni.setStorageSync('tempUserInfo', userInfo);
					}

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabBar/mine/mine',
							fail: (err) => {
								console.error('跳转失败：', err);
								uni.navigateTo({
									url:'/pages/tabBar/mine/mine'
								});
							}
						});
					}, 1500);
				} catch (err) {
					uni.showToast({
						title: '登录失败，请重试',
						icon: 'none'
					});
					console.error('登录错误：', err);
				} finally {
					this.isLoading = false;
				}
			},

			mockLogin() {
				return new Promise((resolve) => {
					setTimeout(resolve, 1500);
				});
			}
		}
	};
</script>

<style scoped>
	/* 完全保留你原有样式 */
	.page-container {
		display: flex;
		justify-content: center;
		padding: 40rpx 30rpx;
		background-color: #f9f9f9;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.form-container {
		width: 100%;
		max-width: 500rpx;
		background-color: #fff;
		padding: 60rpx 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input {
		width: 100%;
		height: 90rpx;
		padding: 0 20rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.input:focus {
		border-color: #007aff;
		outline: none;
	}

	.error-text {
		display: block;
		color: #f53f3f;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.remember-container {
		display: flex;
		align-items: center;
		margin: -15rpx 0 30rpx 0;
		font-size: 26rpx;
		color: #666;
	}

	.remember-text {
		margin-left: 10rpx;
	}

	.btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.login-btn {
		background-color: #007aff;
		color: #fff;
	}

	.loading {
		display: inline-flex;
		align-items: center;
	}

	.loading::before {
		content: '';
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		border-top-color: #fff;
		animation: spin 1s linear infinite;
		margin-right: 6px;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.link-container {
		text-align: center;
		font-size: 26rpx;
		color: #666;
	}

	.link {
		color: #007aff;
		margin-left: 10rpx;
		text-decoration: underline;
		cursor: pointer;
		user-select: none;
	}
</style>